<template>
  <div v-loading="loading">
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
        <el-form-item :label="t('student.fields.batchId')">
          <el-select
            v-model="queryParams.batchId"
            :placeholder="t('common.selectTextPlaceholder') + t('student.fields.batchId')"
            class="!w-160px"
            @change="handleQuery"
          >
            <el-option
              v-for="(item, index) in batchOptions"
              :key="index"
              :label="item.batchName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('student.fields.university')" prop="university">
          <el-input
            v-model="queryParams.schoolName"
            :placeholder="t('common.inputTextPlaceholder') + t('student.fields.university')"
            clearable
            @keyup.enter="handleQuery"
            class="!w-160px"
          />
        </el-form-item>
        <el-form-item :label="t('student.fields.is985')" prop="is985">
          <el-select
            v-model="queryParams.is985"
            :placeholder="t('common.selectTextPlaceholder') + t('student.fields.is985')"
            clearable
            class="!w-160px"
            @change="handleQuery"
          >
            <el-option :label="t('common.yes')" :value="true" />
            <el-option :label="t('common.no')" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('student.fields.is211')" prop="is211">
          <el-select
            v-model="queryParams.is211"
            :placeholder="t('common.selectTextPlaceholder') + t('student.fields.is211')"
            clearable
            class="!w-160px"
            @change="handleQuery"
          >
            <el-option :label="t('common.yes')" :value="true" />
            <el-option :label="t('common.no')" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('student.fields.isFirstClass')" prop="isFirstClass">
          <el-select
            v-model="queryParams.isFirstClass"
            :placeholder="t('common.selectTextPlaceholder') + t('student.fields.isFirstClass')"
            clearable
            class="!w-160px"
            @change="handleQuery"
          >
            <el-option :label="t('common.yes')" :value="true" />
            <el-option :label="t('common.no')" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon icon="ep:search" class="mr-5px" />
            {{ t('common.search') }}
          </el-button>
          <el-button @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-5px" />
            {{ t('common.reset') }}
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <vxe-toolbar ref="toolbarRef" custom />
      <vxe-table
        id="iInterviewSpecialist-table"
        ref="tableRef"
        :data="list"
        stripe
        :custom-config="vxeTableConfig"
        :column-config="{ resizable: true }"
        :size="vxeTableSize"
      >
        <vxe-column
          :title="t('common.index')"
          type="seq"
          field="seq"
          width="60"
          align="center"
          fixed="left"
        />
        <vxe-column
          :title="t('student.fields.studentName')"
          field="studentName"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
          fixed="left"
        />
        <vxe-column
          :title="t('student.fields.phone')"
          field="phone"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.batchId')"
          field="batchName"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <!--        <vxe-column-->
        <!--          :title="t('student.fields.interviewScore')"-->
        <!--          field="interviewScore"-->
        <!--          align="center"-->
        <!--          show-header-overflow-->
        <!--          show-overflow-->
        <!--          min-width="100"-->
        <!--        />-->
        <!--        <vxe-column-->
        <!--          :title="t('student.fields.confirmJudges')"-->
        <!--          field="confirmJudges"-->
        <!--          align="center"-->
        <!--          show-header-overflow-->
        <!--          show-overflow-->
        <!--          min-width="100"-->
        <!--        />-->
        <!--        <vxe-column-->
        <!--          :title="t('student.fields.interviewDate')"-->
        <!--          field="interviewDate"-->
        <!--          align="center"-->
        <!--          show-header-overflow-->
        <!--          show-overflow-->
        <!--          min-width="100"-->
        <!--          :formatter="vxeDateFormatter"-->
        <!--        />-->
        <!--        <vxe-column-->
        <!--          :title="t('student.fields.interviewTime')"-->
        <!--          field="interviewTime"-->
        <!--          align="center"-->
        <!--          show-header-overflow-->
        <!--          show-overflow-->
        <!--          min-width="100"-->
        <!--        />-->
        <!--        <vxe-column-->
        <!--          :title="t('student.fields.interviewGroupId')"-->
        <!--          field="groupName"-->
        <!--          align="center"-->
        <!--          show-header-overflow-->
        <!--          show-overflow-->
        <!--          min-width="100"-->
        <!--        />-->
        <vxe-column
          :title="t('student.fields.chioceStatus')"
          field="chioceStatus"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.chioceMentorId')"
          field="mentorName"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.interviewStatus')"
          field="interviewStatus"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.birthdate')"
          field="birthdate"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
          :formatter="vxeDateFormatter2"
        />
        <vxe-column
          :title="t('student.fields.gender')"
          field="gender"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.politicalStatus')"
          field="politicalStatus"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.ethnic')"
          field="ethnic"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.identityNumber')"
          field="identityNumber"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.contactAddress')"
          field="contactAddress"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.email')"
          field="email"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.university')"
          field="university"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.is985')"
          field="is985"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
          :formatter="vxeBooleanFormatter"
        />
        <vxe-column
          :title="t('student.fields.is211')"
          field="is211"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
          :formatter="vxeBooleanFormatter"
        />
        <vxe-column
          :title="t('student.fields.isFirstClass')"
          field="isFirstClass"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
          :formatter="vxeBooleanFormatter"
        />
        <vxe-column
          :title="t('student.fields.studyMajor')"
          field="studyMajor"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.applyMajor')"
          field="applyMajor"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.majorRank')"
          field="majorRank"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.majorTotal')"
          field="majorTotal"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.classRank')"
          field="classRank"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.classTotal')"
          field="classTotal"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.cet4Score')"
          field="cet4Score"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.cet6Score')"
          field="cet6Score"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.attachment')"
          field="attachment"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        >
          <template #default="scope">
            <FileObjectDownload :file-json="scope.row.attachment" />
          </template>
        </vxe-column>
      </vxe-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
  </div>
</template>

<script setup lang="ts">
import type { VxeTableInstance, VxeTablePropTypes, VxeToolbarInstance } from 'vxe-table'
import { useAppStore } from '@/store/modules/app'
import { BatchApi, BatchVO } from '@/api/recruit/batch'
import { DoubleChioceApi, DoubleChioceMentorRespVO } from '@/api/recruit/doublechioce'
import { vxeDateFormatter2 } from '@/utils/formatTime'
import FileObjectDownload from '@/components/FileObjectDownload/index.vue'
import { vxeBooleanFormatter } from '@/utils/formatter'

/** 我的学生 列表 */
defineOptions({ name: 'MyStudent' })

const { t } = useI18n() // 国际化

const toolbarRef = ref<VxeToolbarInstance>()
const tableRef = ref<VxeTableInstance>()

const loading = ref(true) // 列表的加载中
const list = ref<DoubleChioceMentorRespVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  batchId: undefined,
  choiceStatus: undefined,
  schoolName: undefined,
  is985: undefined,
  is211: undefined,
  isFirstClass: undefined
})
const queryFormRef = ref() // 搜索的表单

const vxeTableConfig: VxeTablePropTypes.CustomConfig = {
  storage: true,
  mode: 'drawer',
  checkMethod({ column }) {
    return !['seq', 'operator'].includes(column.field)
  }
}

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)

// 查询列表
const getList = async () => {
  loading.value = true
  try {
    const data = await DoubleChioceApi.getDoubleChioceStudentPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

// 搜索按钮操作
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

// 重置按钮操作
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

// 计划下拉
const batchOptions = ref<BatchVO[]>([])
const getBatchSelectOptions = async () => {
  batchOptions.value = await BatchApi.getSelectList()
}

/** 初始化 **/
onMounted(async () => {
  await getBatchSelectOptions()
  // 然后查询最新计划的数据
  queryParams.batchId = batchOptions.value[0]?.id ?? undefined
  getList()

  const table = tableRef.value
  const toolbar = toolbarRef.value
  if (table && toolbar) {
    table.connect(toolbar)
  }
})
</script>

<style lang="scss" scoped>
:deep(.vxe-cell .el-button + .el-button) {
  margin-left: 0;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 15px !important;
}
</style>
